<template>
    <view class="commenthistorycomputed">
        <view class="item" v-for="(v, i) in commenthistorycomputed" :key="i" v-if="commenthistorycomputed.length">
            <view v-if="v?.type === 'content'">
                <view class="con">
                    <view class="context">
                        <text class="dian">

                        </text>
                        <text>{{ $t('评价已修改') }}</text>
                    </view>
                    <view class="time">{{ dayjs(v.create_time).format('YYYY-MM-DD HH:mm:ss') }}</view>
                </view>
                <view class="time mb2 pl32">
                    {{ $t('原评价：') }}{{ v.oldcontext }}
                </view>
                <view class="time  mb2 pl32">
                    {{ $t('新评价：') }}{{ v.context }}
                </view>
            </view>
            <view v-else>
                <view class="con">
                    <view class="context">
                        <text class="dian">
                        </text>
                        <text>
                            {{ v?.context }}
                        </text>
                    </view>
                    <view class="time">{{ dayjs(v?.create_time).format('YYYY-MM-DD HH:mm:ss') }}</view>
                </view>
            </view>
        </view>

    </view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
defineProps<{ commenthistorycomputed: any[] }>()
</script>

<style scoped lang="scss">
.commenthistorycomputed {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;


    .item {
        .con {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            height: 54rpx;

            .context {
                color: #000;
                font-size: 14px;
                display: flex;
                flex-wrap: wrap;
                gap: 12rpx;
                align-items: center;

                .dian {
                    width: 8rpx;
                    height: 8rpx;
                    margin-right: 12rpx;
                    background-color: rgba(253, 117, 76, 1);
                    display: inline-block;
                    border-radius: 50%;
                }
            }


        }

        .time {
            color: rgba(102, 102, 102, 1);
            font-size: 12px;
        }
    }

    .pl32 {
        padding-left: 32rpx;
    }
}
</style>